<template>
  <!--模板-->
  定义子类：<br>
  <el-button @click="change1" >直接修改</el-button>
  <el-button @click="change2" >通过方法修改</el-button>
  <el-button @click="reset" >重置</el-button>
  <el-button @click="setValue" >赋值</el-button>

  <hr>
  reactive 的方式：{{nfState}}<br>
  <hr>

  computed（reactive ）：{{nfState.getName}}<br> 

</template>

<script lang="ts">
  import { defineComponent } from 'vue'

  import {
    OptionState
  } from  '../../../lib/main'

  // 定义一个类型
  export type ITest = {
    name: string;
    age: number;
    get getName(): string;
    get getAge(): number;
    addAge(n?: number): void;
    addAge2(n?: number): void;
  }

  const state = OptionState<ITest>('test_OptionState', {
    state: () => {
      return {
        name: '基础设置',
        age: 20
      }
    },
    getters: {
      getName() {
        return this.name + '普通函数'
      },
      getAge: (state: any) => {
        return state.age + '箭头函数'
      }
    },
    actions: {
      addAge(n = 1) {
        this.age += n
      },
      addAge2: (state: any, n = 1 ) => {
        state.age += 10 * n
      }
    },
    options: {
      isLog: false
    }
  })
   

  /**
   * 演示一种比较“扯淡”的使用方式
   */
  export default defineComponent({
    name: 'state-class-son-demo',
    props: {
    },
    setup(props, context) {
     
      const nfState  = state

      console.log('nfState：', nfState)
      console.log('nfState--keys：', Object.keys(nfState))
      for(const key in nfState){
        console.log(key)
      }
      
      const change1 = () => {
        nfState.name = new Date().valueOf().toString()
      }
      const change2 = () => {
        nfState.addAge()
      }
      const reset = () => {
        nfState.$reset()
      }
      
      const setValue = () => {
        nfState.$state = {
          name: 'name 修改：' + new Date().valueOf().toString()
        }
         
      }
       

      return {
        nfState,
        // 基础
        change1,
        change2,
        reset,
        setValue
      }
    }
  })
</script>